<template>
  <div class="editor-location" :style="{ backgroundColor: props.backgroundColor }">
    <div class="location-title" :style="{ color: props.textColor }">
      {{ props.title }}
    </div>
    
    <div class="location-address" :style="{ color: props.textColor }">
      <i class="location-icon el-icon-location"></i>
      {{ props.address }}
    </div>
    
    <div v-if="props.showPhone" class="location-phone" :style="{ color: props.textColor }">
      <i class="phone-icon el-icon-phone"></i>
      {{ props.phone }}
    </div>
    
    <div v-if="props.showNavigationButton" class="location-actions">
      <button 
        class="navigation-button" 
        :style="{ backgroundColor: props.buttonColor, color: '#fff' }"
      >
        {{ props.navigationButtonText }}
      </button>
    </div>
    
    <div class="location-map">
      <div class="map-placeholder">
        <i class="map-icon el-icon-map-location"></i>
        <span>地图加载中...</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  address: {
    type: String,
    default: '北京市朝阳区建国路甲92号'
  },
  title: {
    type: String,
    default: '公司地址'
  },
  showPhone: {
    type: Boolean,
    default: true
  },
  phone: {
    type: String,
    default: '010-12345678'
  },
  showNavigationButton: {
    type: Boolean,
    default: true
  },
  navigationButtonText: {
    type: String,
    default: '导航到这里'
  },
  buttonColor: {
    type: String,
    default: '#8B4513'
  },
  backgroundColor: {
    type: String,
    default: '#ffffff'
  },
  textColor: {
    type: String,
    default: '#333333'
  }
});

defineOptions({
  name: 'editor-location'
});
</script>

<style lang="scss" scoped>
.editor-location {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .location-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  
  .location-address, .location-phone {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
    
    i {
      margin-right: 5px;
      font-size: 16px;
    }
  }
  
  .location-actions {
    margin: 15px 0;
    
    .navigation-button {
      padding: 8px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:hover {
        opacity: 0.9;
      }
    }
  }
  
  .location-map {
    width: 100%;
    height: 150px;
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    
    .map-placeholder {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #999;
      
      .map-icon {
        font-size: 36px;
        margin-bottom: 10px;
      }
    }
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 